<script setup>
import { ref } from "vue";

defineProps({
    height: {
        type: String,
        default: "86rpx"
    },
    title: {
        type: String,
        default: "开始生成"
    },
    expendNum: {
        type: Number,
        default: 1
    },
    labelShow: {
        type: Boolean,
        default: true
    },
});

const emit = defineEmits(["click"]);


const isThrottled = ref(false);

const handleClick = () => {
    if (isThrottled.value) return;
    isThrottled.value = true;
    emit("click");

    setTimeout(() => {
        isThrottled.value = false;
    }, 1000); // 1秒限制
};
</script>

<template>
    <div class='myDrawButton' :style="{ height: height }" @click="handleClick">
        <div class="myDrawButton_title">
            <slot>{{ title }}</slot>
        </div>
        <div class="myDrawButton_label" v-if="labelShow">消耗:{{ expendNum }}算力</div>
    </div>
</template>

<style lang='scss' scoped>
.myDrawButton {
    background: var(--a-main-color);
    border-radius: 44rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .myDrawButton_title {
        font-size: 32rpx;
        color: var(--a-one-text-color);
    }

    .myDrawButton_label {
        font-size: 20rpx;
        color: var(--a-one-text-color);
    }
}
</style>